.top {
  position: relative;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.top .tabbar {
  line-height: 40px;
}
.top .tabbar .category {
  position: relative;
  float: left;
  width: 164px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(90deg, red, #ff3264);
}
.top .tabbar .category .line-menu-icon {
  float: left;
  margin-top: 13px;
  margin-left: 20px;
}
.top .tabbar .category span {
  margin-left: 20px;
}
.top .tabbar .categories {
  position: absolute;
  z-index: 999;
  width: 164px;
  background: linear-gradient(90deg, red, #ff3264);
}
.top .tabbar .categories li {
  height: 42px;
  padding: 0 3px 0 2px;
}
.top .tabbar .categories li a {
  display: inline-block;
  position: relative;
  height: 41px;
  width: 100%;
  line-height: 41px;
  color: #fff;
  border-top: 1px solid #ff5160;
  transition: all 0.2s;
}
.top .tabbar .categories li a img {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 20px;
}
.top .tabbar .categories li a img.icon1,
.top .tabbar .categories li a img.icon2 {
  left: 12px;
}
.top .tabbar .categories li a img.arrow2,
.top .tabbar .categories li a img.arrow1 {
  right: 12px;
}
.top .tabbar .categories li a span {
  margin-left: 0;
  margin: 0 20px;
  line-height: 41px;
}
.top .tabbar .categories li a:hover {
  background: #fff;
  color: red;
}
.top .tabbar .categories li a .arrow2,
.top .tabbar .categories li a .icon2 {
  display: none;
}
.top .tabbar .categories li a:hover .arrow2,
.top .tabbar .categories li a:hover .icon2 {
  display: block;
}
.top .tabbar .categories li a:hover .arrow1,
.top .tabbar .categories li a:hover .icon1 {
  display: none;
}
.top .tabbar ul.list {
  float: left;
  margin-left: 25px;
}
.top .tabbar ul.list li {
  float: left;
  margin: 0 8px;
}
.top .tabbar ul.list li a {
  display: inline-block;
  padding: 0 12px;
  line-height: 40px;
  font-weight: 700;
  font-size: 15px;
  transition: color 0.2s ease-in;
}
.top .tabbar ul.list li a:hover {
  color: #ff1132;
}
.top .banner {
  /*banner*/
  position: relative;
  min-width: 1110px;
  overflow: hidden;
}
.top .banner .swapper img {
  position: relative;
  z-index: 2;
  left: 50%;
  transform: translate(-50%);
}
.top .banner .service {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  height: 45px;
  width: 100%;
}
.top .banner .service .blur {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*毛玻璃效果*/
  background: url(../img/banner-2.jpg) center;
  filter: blur(40px);
}
.top .banner .service .desc {
  position: relative;
  z-index: 4;
}
.top .banner .service .desc .desc-list {
  float: left;
  line-height: 45px;
}
.top .banner .service .desc .desc-list li {
  float: left;
}
.top .banner .service .desc .desc-list li a {
  display: inline-block;
  line-height: 45px;
  margin-right: 30px;
  color: #fff;
}
.top .banner .service .desc .desc-list li a:hover {
  text-decoration: underline;
}
.top .banner .service .desc .tips {
  float: right;
  height: 45px;
  line-height: 45px;
  color: #fff;
}
.top .banner .service .desc .tips:hover {
  text-decoration: underline;
}
.top .detail {
  position: absolute;
  display: none;
  z-index: 9999;
  top: 40px;
  width: 947px;
  height: calc(100% - 145px);
  padding: 30px;
  background-color: #fff;
  transform: translate(164px);
}
.top .detail .item {
  float: left;
  width: 80%;
  height: 100%;
}
.top .detail .item .list {
  float: left;
  width: 45%;
}
.top .detail .item .list h2 {
  color: #000;
  border-bottom: 1px solid #000;
}
.top .detail .item .list .list-items {
  margin-top: 10px;
  padding-right: 30px;
}
.top .detail .item .list span {
  margin-right: 30px;
}
.top .detail .list-img {
  width: 20%;
  float: right;
}
.top .detail .list-img img {
  width: 40%;
}
.top .tabbar:hover .detail {
  display: block;
}
